<template lang="">
    <div>
        <!-- <el-table :data="tableData" style="width: 100%" ref="table" @selection-change="select"> -->
        <el-table :data="tableData" style="width: 100%" ref="table">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <!-- <Simple :question="props.row" :index="props.row.id - 1" :isEditQues="false"
                        v-if="props.row.queType == '0'"></Simple>
                    <Multiple :question="props.row" :index="props.row.id - 1" :isEditQues="false"
                        v-if="props.row.queType == '1'"></Multiple>
                    <Fill :question="props.row" :index="props.row.id - 1" :isEditQues="false"
                        v-if="props.row.queType == '2' || props.row.queType == '3'"></Fill> -->
                    <component :is='handleComponents(props.row.queType)' :question="props.row" :index="props.row.id - 1" :isEditQues="false"></component>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="题目ID" width="180">
            </el-table-column>
            <el-table-column prop="queQue" label="题目">
            </el-table-column>
            <el-table-column prop="queType" label="题型">
                <template slot-scope="scope">
                    <el-tag :type="tag(scope.row.queType)">
                        {{type(scope.row.queType)}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="160">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看  <--能传两个参数 -->
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.queId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <UpdateQues :isEditQues="false"></UpdateQues>
    </div>
</template>
<script>
    import Simple from '../editQues/Simple.vue'
    import Multiple from '../editQues/Multiple.vue'
    import Fill from '../editQues/Fill.vue'
    import Drop from '../editQues/Drop.vue'
    import UpdateQues from '../editQues/UpdateQues.vue'
    export default {
        name: 'ManageTable',
        components: {
            Simple,
            Multiple,
            Fill,
            Drop,
            UpdateQues
        },
        data() {
            return {
                tableData: [
                    /* {
                        "id": 1,
                        "queId": 2,
                        "queOptionA": "选项1",
                        "queOptionB": "选项2",
                        "queOptionC": "选项3",
                        "queQue": "标题标题",
                        "queType": 0
                    },
                    {
                        "id": 2,
                        "queId": 5,
                        "queOptionA": "选项1",
                        "queOptionB": "选项2",
                        "queOptionC": "选项3",
                        "queOptionC": "选项4",
                        "queQue": "多选题",
                        "queType": 1
                    },
                    {
                        "id": 6,
                        "queId": 8,
                        "queOptionA": "",
                        "queQue": "填空题",
                        "queType": 2
                    },
                    {
                        "id": 7,
                        "queId": 7,
                        "queOptionA": "",
                        "queQue": "填空题2",
                        "queType": 3
                    },
                    {
                        "id": 8,
                        "queId": 8,
                        "queOptionA": "123",
                        "queQue": "下拉框",
                        "queType": 4
                    }, */
                ],
                index: 1,
                page: 1,
            }
        },
        methods: {
            emitServer(page) {
                console.log('ManageTable组件的emitServer收到', page);
                let aimPage
                if (page == -1) {
                    aimPage = this.page
                } else {
                    aimPage = page
                }

                console.log({
                    pageSize: 16,
                    start: aimPage
                });

                axios({
                    method: 'GET',
                    url: '/questionBank/selectAll',
                    withCredentials: true,
                    params: {
                        pageSize: 16,
                        start: aimPage
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    console.log('拉取题库列表成功', result.data);
                    this.tableData = result.data.data.list
                    this.$bus.$emit('totalPage', result.data.data.total)  //告知页码组件全部有多少条数
                }).catch((err) => {
                    this.$message('拉取题库列表失败' + err.message)
                });
            },
            handleEdit(ques) {
                this.$bus.$emit('updateQues', ques)  //这里很乱
            },
            handleDelete(id) {
                console.log('删除queId', id);
                axios({
                    method: 'DELETE',
                    url: `/questionBank/deleteQuestion`,
                    withCredentials: true,
                    params: {
                        queId: id
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.$message({
                        message: `已删除ID为:${id}的题目`,
                        type: 'success'
                    });
                    this.emitServer(-1)
                }).catch((err) => {
                    this.$message({
                        message: '删除失败' + err.message,
                        type: 'info'
                    });
                });
            },
            type(queType) {
                if (queType == 0) {
                    return '单选题'
                } else if (queType == 1) {
                    return '多选题'
                } else if (queType == 2) {
                    return '填空题(多行)'
                }else if(queType == 3){
                    return '填空题(单行)'
                }else if(queType == 4){
                    return '下拉框'
                }
            },
            tag(queType) {
                if (queType == 0) {
                    return ''
                } else if (queType == 1) {
                    return 'warning'
                } else if (queType == 2 || queType == 3) {
                    return 'danger'
                }else if(queType == 4){
                    return 'success'
                }
            },
            handleComponents(queType){
                if(queType == 0){
                    return Simple
                }else if(queType == 1){
                    return Multiple
                }else if(queType == 2 || queType == 3){
                    return Fill
                }else if(queType == 4){
                    return Drop
                }
            }
        },
        mounted() {
            this.$bus.$on('pageChange', (val) => {
                this.emitServer(val)
            })
            this.$bus.$on('clearSearch', () => {
                this.emitServer(1)
            })
            this.$bus.$on('search', (obj) => {
                console.log('搜索', obj);
                this.tableData = obj
            })
            this.emitServer(1)
        },
        beforeDestroy() {
            this.$bus.$off('pageChange')
            this.$bus.$off('clearSearch')
            this.$bus.$off('search')
        },
    }
</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>